<template>
  <van-nav-bar title="购物订单" left-text="返回" left-arrow @click-left="$router.back()" />
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

<van-swipe-cell v-for="item in buyList">
  <van-cell :border="true" 
  :title=item.title  :value=item.status />
  <!-- 商品列表 -->
  <van-card :desc=item.time :title=item.name class="goods-card"
    :thumb="item.img" />
  <p class="first"><span>点餐 {{ item.num }} 项,总计 ¥ {{ item.price}}</span></p>
  <p><van-button plain size="small" type="primary" >取消订单</van-button>
    <van-button plain size="small" type="success"  v-if="!item.pay">立即支付</van-button>
  </p>
</van-swipe-cell>
</van-list>
</template>

<script setup>
import { ref } from 'vue'
import { getlistAll } from '@/api/order'

const list = ref([]);
const buyList = ref([])
//点单
getlistAll().then(res =>{
  // console.log(res.data.data);

 list.value = res.data.data
 buyList.value=list.value.filter(item =>{
  return item.kind == 3
 })
 
})
</script>
 
<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

p {
  line-height: 20px;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: .2rem;

}

.van-list {
  border: 1px solid #f8f8f8;
}

.first {
  padding-right: .3rem;
  color: orange;
  height: 20px;
  line-height: 20px;
}

.order {
  border: 2px solid black;
}

.van-button--small {
  margin-right: 10px;
}

.delete-button {
  height: 100%;
}
</style>